<!DOCTYPE html>
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout}">

<head>
    <title th:text="#{screen.button.changePassword}"></title>
    <link rel="icon" th:href="@{/favicon.ico}" type="image/x-icon"/>
    <script th:inline="javascript">
        /*<![CDATA[*/

        var policyPattern = /*[[${policyPattern}]]*/;

        /*]]>*/
    </script>
    <script type="text/javascript" th:src="@{/js/passwordMeter.js}"></script>
</head>

<body id="cas" class="hold-transition login-page">
    <div layout:fragment="content">
        <div class="row">
            <div class="col-sm-12 col-md-6">
                <div class="alert alert-info">
                    <h2 th:utext="${expiredPass} ? #{screen.expiredpass.heading} : #{screen.mustchangepass.heading}"/>
                    <p/>
                    <br/>

                    <form id="passwordManagementForm" th:if="${passwordManagementEnabled}" method="post">
                        <table>
                            <tr>
                                <td class="pm">
                                    <label for="password" th:utext="#{screen.pm.enterpsw}"/>&nbsp;
                                </td>
                                <td class="pm">
                                    <input class="required form-control form-control-lg" type="password" id="password" name="password" />
                                </td>
                            </tr>

                            <tr>
                                <td class="pm">
                                    <label for="confirmedPassword" th:utext="#{screen.pm.confirmpsw}"/>&nbsp;
                                </td>
                                <td class="pm">
                                    <input class="required form-control form-control-lg" type="password" id="confirmedPassword" name="confirmedPassword"/>
                                </td>
                            </tr>
                        </table>


                        <div>
                            <br/>
                            <div class="progress">
                                <div id="strengthProgressBar" class="progress-bar"></div>
                            </div>
                        </div>
                        </p>
                        <p id="password-strength-text"></p>

                        <p align="center">
                            <input type="hidden" name="execution" th:value="${flowExecutionKey}"/>
                            <input type="hidden" name="_eventId" value="submit"/>
                            <input class="btn btn-success btn-lg"
                                   name="submit"
                                   accesskey="s"
                                   th:value="#{screen.pm.button.submit}"
                                   id="submit"
                                   type="submit"
                                   disabled="true"/>
                            &nbsp;
                            <input
                                    class="btn btn-danger btn-lg"
                                    name="cancel"
                                    accesskey="c"
                                    th:value="#{screen.pm.button.cancel}"
                                    type="button"
                                    onclick="location.href = location.href;"/>
                        </p>
                    </form>
                    <p th:unless="${passwordManagementEnabled}" th:utext="${expiredPass} ? #{screen.expiredpass.message} : #{screen.mustchangepass.message}"/>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
